<template>
  <div>
    <el-card shadow="never">
      <div class="login-container">
        <el-form label-width="80px" style="width:80%">

          <el-form-item label="用户名">
            <el-input v-model="user.username" clearable placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="user.password" clearable type="password" placeholder="请输入密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="loginBtn">登录</el-button>
            <el-button style="margin-left:8px;" @click="$router.push('/register')">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'Login',
  data() {
    return {
      user: {
        roles: '1'
      }
    }
  },
  created() {
  },
  methods: {
    loginBtn() {
      login(this.user).then(resp => {
        this.$notifySuccess(resp.msg)
        // 有异常就停止登陆界面
        this.$store.dispatch('user/login', resp.data)
        localStorage.setItem('userInfo', JSON.stringify(resp.data))
        this.$router.push('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container{
    margin-top: 40px;
    height: 100vh;
    display: flex;
    justify-content: center;

}
</style>
